import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { removeItem, asyncGetData } from "./store/todolist/todolistSlice";

const List = () => {
  const list = useSelector((state) => state.todolist.list);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(asyncGetData());
    // eslint-disable-next-line
  }, []);

  const remove = (id) => () => {
    console.log(id);
    dispatch(removeItem({ id: id }));
  };

  return (
    <ul>
      {list.map((item) => (
        <li key={item._id}>
          {item.title} - <button onClick={remove(item._id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default List;
